 
<template>
  <div>
    <div class="echartsGroup">
      <!-- 返回中国地图 -->
      <div class="button" v-show="isReturnChina" @click="returnChinaFn()">
        返回
      </div>
      <div
        ref="china_map"
        id="mapWrap"
        style="height: 300px; width: 100vw"
      ></div>
      <div
        style="position: absolute; bottom: 15px; margin: 0 8px; display: flex"
      >
        <el-button-group>
          <el-button
            type="primary"
            size="small"
            :class="dayIndex == 0 ? 'bg' : 'bg1'"
            @click="activeHandle(0)"
            >当天</el-button
          >
          <el-button
            type="primary"
            :class="dayIndex == 1 ? 'bg' : 'bg1'"
            size="small"
            @click="activeHandle(1)"
          >
            近一周</el-button
          >
        </el-button-group>
      </div>
    </div>
  </div>
</template>
 
  <script>
import axios from "axios";
import * as echarts from "echarts";
import "echarts/map/js/china.js"; // 核心文件
require("echarts/theme/macarons"); //
import bus from "../js/bus";
const BASE = "http://test.ouyeelf.com/mockapi/107";
export default {
  data() {
    return {
      // data_list: [
      //   { name: "江苏省", value: 6 },
      //   { name: "西藏", value: 8 },
      //   { name: "安徽", value: 118491 },
      //   { name: "湖北", value: 117036 },
      //   { name: "湖南", value: 110666 },
      //   { name: "广东", value: 109915 },
      //   { name: "浙江", value: 69540 },
      //   { name: "福建", value: 45146 },
      //   { name: "山东", value: 42753 },
      //   { name: "河南", value: 31141 },
      //   { name: "四川", value: 30287 },
      //   { name: "河北", value: 29890 },
      //   { name: "江西", value: 23649 },
      //   { name: "黑龙江", value: 20475 },
      //   { name: "陕西", value: 17942 },
      //   { name: "贵州", value: 16019 },
      //   { name: "吉林", value: 15441 },
      //   { name: "广西", value: 11875 },
      //   { name: "山西省 ", value: 11077 },
      //   { name: "云南省", value: 9238 },
      //   { name: "辽宁省", value: 6538 },
      //   { name: "甘肃省", value: 6128 },
      //   { name: "重庆市", value: 5883 },
      //   { name: "内蒙古", value: 5 },
      //   { name: "海南省", value: 4596 },
      //   { name: "天津市", value: 4244 },
      //   { name: "新疆省", value: 4125 },
      //   { name: "上海市", value: 3429 },
      //   { name: "宁夏市", value: 3225 },
      //   { name: "青海市", value: 1833 },
      //   { name: "北京市", value: 1765 },
      // ],
      dayIndex: 0,
      disPlay: true,
      peopleCounts: {}, //人数
      top5DataList: [], //列表展示
      nameList: "",
      showProveces: false,
      mapListData: [
        "image://",
        "image://",
        "image://",
      ],
      chinaMap: null,
      mapChart: null,
      nameList: "",
      provinceData: {},
      toolTipData: [],
      mapDataList: [
        //自己做的模拟数据 后续根据业务展示
        { name: "辽宁", value: 1 },
        { name: "山东", value: 1 },
        { name: "上海", value: 1 },
        { name: "北京", value: 1 },
        { name: "湖北", value: 1 },
        { name: "江苏", value: 1 },
        { name: "河北", value: 1 },
        { name: "重庆", value: 1 },
        { name: "云南", value: 1 },
        { name: "广东", value: 1 },
        { name: "新疆", value: 1 },
        { name: "山西", value: 1 },
        { name: "安徽", value: 1 },
      ],
      provinceData: [
        //省份公司的数据
        { name: "深圳市", value: 23, children: ["福田", "南山", "龙华"] },
      ],
      provinces: {
        //数据
        台湾: "taiwan",
        河北: "hebei",
        山西: "shanxi",
        辽宁: "liaoning",
        吉林: "jilin",
        黑龙江: "heilongjiang",
        江苏: "jiangsu",
        浙江: "zhejiang",
        安徽: "anhui",
        福建: "fujian",
        江西: "jiangxi",
        山东: "shandong",
        河南: "henan",
        湖北: "hubei",
        湖南: "hunan",
        广东: "guangdong",
        海南: "hainan",
        四川: "sichuan",
        贵州: "guizhou",
        云南: "yunnan",
        陕西: "shanxi1",
        甘肃: "gansu",
        青海: "qinghai",
        新疆: "xinjiang",
        广西: "guangxi",
        内蒙古: "neimenggu",
        宁夏: "ningxia",
        西藏: "xizang",
        北京: "beijing",
        天津: "tianjin",
        上海: "shanghai",
        重庆: "chongqing",
        香港: "xianggang",
        澳门: "aomen",
      },
      isReturnChina: false, //是否显示返回中国地图
      options: null, //echarts 存数据
    };
  },

  beforeDestroy() {
    window.removeEventListener("resize", this.screenResize);
  },
  mounted() {
    // 监听屏幕大小变化
    window.addEventListener("resize", this.screenResize);
    // 一进来主动调取屏幕适配
    this.screenResize();
    window.clickRoute = this.clickRoute;
    this.$nextTick(() => {
      this.chinaMaprsult("china");
    });
  },
  methods: {
    //切换背景颜色
    activeHandle(e) {
      this.dayIndex = e;
    },
    // 中国地图点击省份 显示当前省份的详细的地区。
    chinaMapHidden(chinaMap) {
      let that = this;
      chinaMap.off("click"); //这里解决多次触发点击事件 但是还会执行2次  引用echarts地图，点击各个省份时，点击一个调用两次接口，再点击一次，调用四次接口，再点击调用八次。。。。依次叠加，问题在于，没有将地图上的点击事件清空
      chinaMap.on("click", async function (params) {
        // that.disPlay=false
        // console.log(params,'params----------------------');
        bus.$emit("sendByBus", params.name);
        if (params.name in that.provinces) {
          let s = await import(
            `echarts/map/js/province/${that.provinces[params.name]}.js`
          );
          if (s) {
            that.chinaMaprsult(params.name);
          }
        }
      });
    },
    // 渲染地图
    chinaMaprsult(name = null) {
      var toolTipData = [];
      //后台接口
      var that = this;
      axios({
        method: "get",
        url: BASE + "/report/summary",
        data: {},
      }).then(
        (res) => {
          if (res.data.code == "0") {
            toolTipData = res.data.data.mapData;
            that.peopleCounts = res.data.data.peopleCount;
            that.top5DataList = res.data.data.top5Data;
            bus.$emit("peopleCounts", res.data.data.itemlist);
            bus.$emit("top5DataList", res.data.data.top5Data);
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        },
        (err) => {
          console.log(err);
        }
      );
      var img =
        "image://";
      const chainDataPic = [
        {
          adcode: "520321",
          // people_count_2010: 942904,
          lat: 41.796767,
          lng: 123.429096,
          name: "辽宁",
          level: "district",
          parent: "遵义市",
        },
        {
          adcode: "310000",
          // people_count_2010: 523180,
          // value: [121.490317, 31.222771],
          lat: 36.675807,
          lng: 117.000923,
          name: "山东",
          // level: "district",
          // parent: "遵义市",
        },
        {
          adcode: "310000",
          // people_count_2010: 523180,
          // value: [121.490317, 31.222771],
          lat: 31.222771,
          lng: 121.490317,
          name: "上海",
          // level: "district",
          // parent: "遵义市",
        },
        {
          adcode: "110000",
          // people_count_2010: 523180,
          // value: [121.490317, 31.222771],
          lat: 39.917544,
          lng: 116.418757,
          name: "北京",
          level: "district",
          parent: "东城区",
        },
        {
          adcode: "520321",
          // people_count_2010: 942904,
          lat: 30.584355,
          lng: 114.298572,
          name: "湖北",
          level: "district",
          parent: "遵义市",
        },
        {
          adcode: "310000",
          // people_count_2010: 523180,
          // value: [121.490317, 31.222771],
          lat: 31.574729,
          lng: 120.301663,
          name: "江苏",
          // level: "district",
          // parent: "遵义市",
        },
        {
          adcode: "110000",
          // people_count_2010: 523180,
          // value: [121.490317, 31.222771],
          lat: 38.045474,
          lng: 114.502461,
          name: "河北",
          level: "district",
          parent: "东城区",
        },
        {
          adcode: "520321",
          // people_count_2010: 942904,
          lat: 29.533155,
          lng: 106.504962,
          name: "重庆",
          level: "district",
          parent: "遵义市",
        },
        {
          adcode: "310000",
          // people_count_2010: 523180,
          // value: [121.490317, 31.222771],
          lat: 25.040609,
          lng: 102.712251,
          name: "云南",
          // level: "district",
          // parent: "遵义市",
        },
        {
          adcode: "110000",
          // people_count_2010: 523180,
          // value: [121.490317, 31.222771],
          lat: 23.125178,
          lng: 113.280637,
          name: "广州",
          level: "district",
          parent: "东城区",
        },
        {
          adcode: "520321",
          // people_count_2010: 942904,
          lat: 43.792818,
          lng: 87.617733,
          name: "新疆",
          level: "district",
          parent: "遵义市",
        },
        {
          adcode: "310000",
          // people_count_2010: 523180,
          // value: [121.490317, 31.222771],
          lat: 37.857014,
          lng: 112.549248,
          name: "山西",
          // level: "district",
          // parent: "遵义市",
        },
        {
          adcode: "110000",
          // people_count_2010: 523180,
          // value: [121.490317, 31.222771],
          lat: 31.86119,
          lng: 117.283042,
          name: "安徽",
          level: "district",
          parent: "东城区",
        },
      ];
      name == "china"
        ? (this.isReturnChina = false)
        : (this.isReturnChina = true);
      let chinaMap = echarts.init(this.$refs.china_map); //这里是为了获得容器所在位置
      this.options = {
        // 鼠标悬浮出现黑框
        tooltip: {
          // 鼠标移到图里面的浮动提示框
          show: true,
          trigger: "item", //数据项图形触发 //显示悬浮窗口
          formatter: function (params) {
            if (typeof params.value[2] == "undefined") {
              var toolTiphtml = "";
              for (var i = 0; i < toolTipData.length; i++) {
                // console.log(params.name == toolTipData[i].name,params.name ,toolTipData[i].name,'params.name == toolTipData[i].name----');
                if (params.name == toolTipData[i].name) {
                  toolTiphtml += toolTipData[i].name + ":<br>";
                  for (var j = 0; j < toolTipData[i].value.length; j++) {
                    toolTiphtml +=
                      toolTipData[i].value[j].name +
                      ":" +
                      toolTipData[i].value[j].value +
                      "<br>";
                  }
                }
              }
              return toolTiphtml;
            } else {
              var toolTiphtml = "";
              for (var i = 0; i < toolTipData.length; i++) {
                if (params.name == toolTipData[i].name) {
                  toolTiphtml += toolTipData[i].name + ":<br>";
                  for (var j = 0; j < toolTipData[i].value.length; j++) {
                    toolTiphtml +=
                      toolTipData[i].value[j].name +
                      ":" +
                      toolTipData[i].value[j].value +
                      "<br>";
                  }
                }
              }
              return toolTiphtml;
            }
          },
        },
        //数据映射
        visualMap: {
          type: "piecewise", //分段标签      type: 'continuous', // 定义为连续型 viusalMap
          show: true, //是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在// 指定 visualMapContinuous 组件的允许的最小/大值。
          min: 0, //最小值
          // max: 500, //最大值，不设置为无限大
          left: 8, //距离右侧位置
          bottom: 55, //距离底部位置
          orient: "vertical", //组件竖直放置
          align: "left", //色块在左
          fontSize: 18,
          itemWidth: 10, //图形的宽度，即长条的宽度。
          itemHeight: 18, //图形的宽度，即长条的宽度。
          // dimension:1,               //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
          // seriesIndex:1,             //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
          seriesIndex: 0, //指定取哪个系列的数据(series.data)，若不设置则会影响图上标点颜色设置。
          hoverLink: true, //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
          // formatter: function (value) {
          //   //标签的格式化工具。
          //   let htmlStr = `
          //   <div style='font-size:18px;margin-bottom:20px'> ${value.name}</div>
          //   <p style='text-align:left;margin-top:-10px;'>
          //        华宝租赁：${localValue}<br/>
          //        欧冶金服：${perf}<br/>
          //   </p>
          // `;
          //   // 下载速度downloadSpeep：${downloadSpeep}<br/>
          //   // 可用性usability：${usability}<br/>
          //   // 监测点数point：${point}<br/>
          //   return htmlStr;
          // },
          realtime: false, // 拖拽时，是否实时更新calculable: true, // 是否显示拖拽用的手柄// 定义 在选中范围中 的视觉元素
          textGap: 12, //文字主体之间的距离
          itemSymbol: "circle", //右下角映射组件使用圆点形状
          showLabel: true,
          // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
          calculable: true,
          // 拖拽时，是否实时更新
          //一以下是分段式视觉映射组件的每一段的范围
          //gt：大于、gte：大于等于、lt：小于、lte：小于等于。
          pieces: [
            {
              gte: 1,
              // lte: 5,
              type: "scatter", // 带有涟漪特效动画的散点（气泡）图
              label: "打卡定位",
              color: "#ebf1ff",
              symbol: img, //自定义的展示图标
              symbolSize: [12, 20], // （宽高）
              textStyle: {
                color: "#35363a", // 页面初始化的地图文字颜色 // 省份标签字体颜色
                fontSize: 16, // 页面初始化的地图文字大小
              },
              itemStyle: {
                normal: {
                  color: "#4bbbb2",
                  borderColor: "#b4dccd",
                  width: 12,
                  height: 16,
                },
              },
              //定以一个空数组后期点击的时候往里面添加新数据
            },
          ],
        },
        geo: {
          map: name ? name : "china", // 核心
          top: "2%",
          scaleLimit: {
            min: 1, //最小1倍
            max: 5, //最大5倍
          },
          roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，
          // 可以设置成 ‘scale’ 或者 ‘move’。设置成 true 为都开启
          label: {
            // 页面初始化加载的文字
            normal: {
              show: false, // 显示省份标签

              // formatter: function (params) {
              //   return mapItemCountArray1
              //     .map((item) => {
              //       return item.name == params.name ? item.value[2] + "个" : "";
              //     })
              //     .join("");
              // },

              textStyle: {
                // color: '#000'
                color: "#ccc", // 页面初始化的地图文字颜色 // 省份标签字体颜色
                fontSize: 10, // // 页面初始化的地图文字大小
              },
            },
          },
          itemStyle: {
            //设置样式
            normal: {
              label: { show: false },
              borderWidth: 0.5, //区域边框宽度
              borderColor: "rgba(119, 156, 255, 1)",
              areaColor: "#fff", // 区域颜色
            },
            emphasis: {
              // 高亮状态(鼠标移入后)的多边形和标签样式
              // 移入背景颜色
              // areaColor: '#ff00ff',
              areaColor: "#F9D92E", // 区域颜色
              // shadowOffsetX: 12,
              // shadowOffsetY: 12,
              show: true,
              textStyle: {
                color: "#000",
                fontSize: "12px",
              },
            },
          },
        },
        // series: [
        //   //所有的市
        //   {
        //     name: "pm2.5",
        //     type: "effectScatter",
        //     coordinateSystem: "geo",
        //     data: convertData(data),
        //     symbolSize: function(val) {
        //       return val[2] / 10;
        //     },
        //     //这几个样式一定要加，加上才有那种光圈的效果
        //     showEffectOn: "render",
        //     rippleEffect: {
        //       brushType: "stroke"
        //     },
        //     hoverAnimation: true,

        //     label: {
        //       formatter: "{b}",
        //       position: "right",
        //       show: true
        //     },
        //     //圆点的样式
        //     itemStyle: {
        //       color: "#ddb926"
        //     },
        //     emphasis: {
        //       label: {
        //         show: true
        //       }
        //     }
        //   }
        // ],

        // backgroundColor: "#f7f8fa", // 图表背景色
        series: [
          {
            type: "map",
            geoIndex: 0,
            aspectScale: 0.75, //这个参数用于 scale 地图的长宽比。
            // 最终的 aspect 的计算方式是：geoBoundingRect.width / geoBoundingRect.height * aspectScale
            itemStyle: {
              normal: {
                backgroundColor: function (params) {
                  // 我这里是用数值value判断，也可用params.name判断
                  if (params.value) {
                    console.log(1111);
                    return "#028090";
                  } else {
                    console.log(2222);
                    return "#eceffe";
                  }
                },
                color: function (params) {
                  // 我这里是用数值value判断，也可用params.name判断
                  if (params.value) {
                    console.log(1111);
                    return "#028090";
                  } else {
                    console.log(2222);
                    return "#eceffe";
                  }
                },
                // 板块边框颜色
                borderColor: "rgba(255, 255, 253)",
              },
              // zoom: 1.2 // 设置地图默认大小
              zoom: 1.5, //地图缩放比例,默认为1
              emphasis: {
                //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                // label: { show: true },
                //是图形在默认状态下的样式
                label: {
                  show: true, //是否显示标签
                  textStyle: {
                    color: "black",
                  },
                },
              },
            },

            label: {
              normal: {
                show: true, //显示省份标签
                textStyle: { color: "#696969" }, //省份标签字体颜色
              },
              emphasis: {
                show: true,
                textStyle: {},
              },
            },
            data: this.mapDataList,
          },
          // 用于地图中给每个名字设置前面的图标
          ...chainDataPic.map((item, index) => {
            return {
              type: "scatter",
              coordinateSystem: "geo",
              //自定义图片的 位置（lng, lat）
              data: [{ name: item.name, value: [item.lng, item.lat] }],
              //自定义图片的 大小
              symbolSize: [12, 18],
              //自定义图片的 路径
              symbol: this.mapListData[index],
              // symbolKeepAspect: "true",
              symbol: this.disPlay == true ? img : "",
              itemStyle: {
                normal: {
                  color: "#4bbbb2",
                  borderColor: "#b4dccd",
                  width: 12,
                  height: 16,
                },
              },
            };
          }),
          // {
          //   type: "effectScatter",
          //   coordinateSystem: "geo",
          //   rippleEffect: {
          //     brushType: "fill",
          //     scale: 0,
          //   },
          //   showEffectOn: "render",
          //   label: {
          //     lineHeight: 30,
          //     normal: {
          //       show: true,
          //       color: "#081727",
          //       position: "inside",
          //       padding: [5, 0, 0, 0],
          //       verticalAlign: "middle",
          //       formatter: function (para) {
          //         return "{cnNum|" + para.data.value[2] + "}";
          //       },
          //       rich: {
          //         cnNum: {
          //           fontSize: 16,
          //           color: "#081727",
          //           lineHeight: 28,
          //         },
          //       },
          //     },
          //   },
          //   symbol: "roundRect",
          //   // symbolRotate: 20,
          //   symbolSize: [40, 28],
          //   data: [],
          //   zlevel: 1,
          // },
        ],
      };
      chinaMap.setOption(this.options);
      this.chinaMapHidden(chinaMap);
    },
    // 返回中国地图
    returnChinaFn() {
      bus.$emit("sendMessage", this, this.showProveces);
      this.chinaMaprsult("china");
    },
    // 点击跳转页面
    clickRoute() {
      alert("点击了,做其他操作!");
      // this.$router.push('/')
    },
    // 获取散点图数据，然后渲染在地图上
    // getData() {
    //   let seriesArr = this.scatterData.map((item) => {
    //     this.nameList = item.name;
    //     return {
    //       name: item.name,
    //       type: "effectScatter", // 带有涟漪特效动画的散点（气泡）图
    //       data: item.children,
    //       coordinateSystem: "geo", // 让散点图和地图关联起来，就是渲染在地图上
    //       rippleEffect: {
    //         number: 3, // 波纹的数量
    //         scale: 5, // 波纹的最大缩放比例
    //       },
    //     };
    //   });

    //   let dataOption = {
    //     series: seriesArr, // 散点数据
    //   };
    //   // 生成图表
    //   let chinaMap = echarts.init(this.$refs.china_map); //这里是为了获得容器所在位置
    //   chinaMap.setOption(dataOption);
    // },
    // 监听屏幕变化
    screenResize() {
      this.$nextTick(() => {
        // 获取图表区域的宽度，作为基准值来设置其他需要动态改变的尺寸
        let width = this.$refs.china_map.offsetWidth;
        this.size = (width / 100) * 3.6; // 定义一个基准尺寸

        // 拆分option：3、受屏幕大小影响的配置在屏幕改变的时候set
        let screenOption = {
          // 图例大小
          legend: {
            itemWidth: this.size / 2,
            itemHeight: this.size / 2,
          },

          //  标题大小通过动态style来控制
          title: {
            textStyle: {
              fontSize: this.size,
            },
          },
        };

        let chinaMap = echarts.init(this.$refs.china_map);
        chinaMap.setOption(screenOption);
        // 更新图表
        chinaMap.resize();
      });
    },
    // 双击地图回到中国地图
    back() {
      let backOption = {
        geo: {
          map: "china", // geo中map设置为谁就会显示那个地图
        },
      };
      let chinaMap = echarts.init(this.$refs.china_map);
      chinaMap.setOption(backOption);
    },
  },
};
</script>
  <style scoped>
.echartsGroup {
  /* height: 400px; */
  /* height: 100vh; */
  /* width: 500px;
  height: 500px; */
  position: relative;
}
.echartsGroup .button {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  /* border: 1px solid #eceffe; */
  /* border-radius: 10px; */
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 99;
}
.bg1 {
  border-radius: 4px;
  text-align: center;
  border: 1px solid #babad3;
  color: rgb(152, 163, 212);
  background: #fff;
}

.bg {
  border-radius: 4px;
  border: 1px solid #babad3;
  text-align: center;
  color: rgb(255, 255, 255);
  background: rgb(152, 163, 212);
}
::v-deep .el-button--primary:focus,
.el-button--primary:hover {
  background: rgb(152, 163, 212);
  border-color: 1px solid #babad3;
  color: rgb(255, 255, 255);
}
</style>  
 
<style>
.list-ul {
  list-style: none;
}
.list-li {
  pointer-events: all;
  cursor: pointer;
}
</style>